Using the Stack Layout nodes

Use the Stack Layout nodes to arrange nodes next to each other on the selected axis. You can set the direction and the starting point for arranging Stack Layout 3D child nodes on x, y, and z axes, and Stack Layout 2D child nodes on x and y axes.

Creating a Stack Layout node

To create a Stack Layout node:

1. In the Project press Alt and right-click the node where you want to create a Stack Layout node and select either Stack Layout 3D, or Stack Layout 2D.
   Note that you can create a 3D node only inside 3D nodes, and 2D node only inside 2D nodes.
2. In the Properties set the Direction property to the axis long which you want the Stack Layout node to arrange its child nodes.
3. In the Project add child nodes to the Stack Layout node.
   For example, if you created a Stack Layout 3D node, add several Sphere nodes, if you created a Stack Layout 2D node, add several Image nodes.
   As you add child nodes, the Stack Layout node positions them along the axis defined by its Direction property.

4. (Optional) To clear the area around child nodes in a layout, in the Project select child nodes in the layout, in the Properties click , and add and set the margin properties:

   • Depth Margin to clear the area in the back and the front of a child node.
   • Horizontal Margin to clear the area on the left and the right sides of a child node.
   • Vertical Margin to clear the area on the bottom and the top of a child node.

Reversing the order of Stack Layout node child nodes

To reverse the order of child nodes in a Stack Layout node, in the Project select the Stack Layout node for which you want to reverse the order of child nodes and in the Properties enable the Reversed property.

Setting the background of a Stack Layout 2D node

Use brushes to set the background of 2D nodes. In Kanzi all 2D nodes by default have transparent background.

To set the background:

1. Create a Color Brush, a Texture Brush, or a Material Brush. See Using brushes.
   
2. In the Project select the 2D node the background of which you want to paint.
   Note that you can set only the background of 2D nodes.
3. In the Properties click , add the Background Brush property, and select the brush you created in the first step.
   

Using the Stack Layout 3D node in the API

To create a Stack Layout 3D object:

// Create a Stack Layout 3D object named Stack.
StackLayout3DSharedPtr stack = StackLayout3D::create(domain, "Stack");

To control the direction of a stack layout:

// Set the stack layout to arrange its items along the x axis.
stack->setDirection(StackLayout3D::DirectionX);

To add items to a stack layout:

// Stock Layout 3D arranges its items in the order you add them.
// Create a 3D object and ...
Model3DSharedPtr item1 = Model3D::createBox(domain, "item1", 1.3f, 1.3f, 1.3f, KanziThemeRed);
// ... add it to the stack layout.
stack->addChild(item1);
Model3DSharedPtr item2 = Model3D::createSphere(domain, "item2", 0.8f, 30, 30, KanziThemeGreen);
stack->addChild(item2);
Model3DSharedPtr item3 = Model3D::createBox(domain, "item3", 1.0f, 1.0f, 1.0f, KanziThemeBlue);
stack->addChild(item3);

To reverse the order in which a stack layout arranges its items:

// Set the stack layout to arrange its items in the reverse order.
stack->setReversed(true);

For details, see the API reference.

Using the Stack Layout 2D node in the API

To create a Stack Layout 2D object:

// Create a Stack Layout 2D object named Stack.
StackLayout2DSharedPtr stack = StackLayout2D::create(domain, "Stack");

To control the direction of a stack layout:

// Set the stack layout to arrange its items along the x axis.
stack->setDirection(StackLayout2D::DirectionX);

To add items to a stack layout:

// Stock Layout 2D arranges its items in the order you add them.
// Create a 3D object ...
EmptyNode2DSharedPtr item1 = EmptyNode2D::create(domain, "item1", 100.0f, 100.0f, KanziThemeRed);
// ... and add it to the stack layout.
stack->addChild(item1);
EmptyNode2DSharedPtr item2 = EmptyNode2D::create(domain, "item2", 100.0f, 100.0f, KanziThemeGreen);
stack->addChild(item2);
EmptyNode2DSharedPtr item3 = EmptyNode2D::create(domain, "item3", 100.0f, 100.0f, KanziThemeBlue);
stack->addChild(item3);

To reverse the order in which a stack layout arranges its items:

// Set the stack layout to arrange its items in the reverse order.
stack->setReversed(true);

For details, see the API reference.

See also

Using the Dock Layout nodes

Using the Flow Layout nodes

Using the Grid Layout nodes

Using the Stack Layout nodes

Using the Trajectory Layout nodes

Layout control nodes

Open topic with navigation